import React, { useEffect } from 'react';
import './index.less';
import { Button, Input, Form, DatePicker } from 'antd';
import {
  ProForm,
  ProFormDependency,
  ProFormList,
  ProFormText,
} from '@ant-design/pro-components';
import axios from 'axios';
import { Select, InputNumber, Radio } from 'antd';
import { history } from 'umi';
import { CloseCircleOutlined, SmileOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormat);
const range = (start, end) => {
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
};

export default function Newapp() {
  const { Search, TextArea } = Input;
  // eslint-disable-next-line arrow-body-style
  const disabledDate = (current) => {
    // Can not select days before today and today
    return current && current < dayjs().endOf('day');
  };
  const disabledDateTime = () => ({
    disabledHours: () => range(0, 24).splice(4, 20),
    disabledMinutes: () => range(30, 60),
    disabledSeconds: () => [55, 56],
  });
  // 搜索
  const onSearch = (values) => {
    console.log(values);
  };
  // 表单添加
  const onFinish = (values) => {
    console.log(values);
    axios.post('http://127.0.0.1:7777/kucun/addaddlist', values).then((res) => {
      console.log(res);
      history.push('/home/stock/waitlist');
    });
  };
  return (
    <>
      <div className="add">
        {/* 基本信息 */}
        <div className="tables">
          <Form
            onFinish={onFinish}
            name="basic"
            labelCol={{
              span: 8,
            }}
            wrapperCol={{
              span: 16,
            }}
            style={{
              width: '100%',
            }}
            initialValues={{
              remember: true,
            }}
            // onFinish={onFinish}
          >
            <div className="topBut">
              <Button>保存</Button>
              <Button htmlType="submit">保存且新增</Button>
              <Button>草稿箱</Button>
              <span className="spans"></span>
              <Button>导入</Button>
            </div>
            <h2>入库申请</h2>
            <table border="1">
              <thead>
                <tr>
                  <td colspan="4">基本信息</td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <span>车型：</span>
                    <Form.Item
                      name="chexing"
                      style={{
                        width: 200,
                        display: 'inline-block',
                      }}
                    >
                      <Input style={{ width: '200px' }} />
                    </Form.Item>
                  </td>
                  <td>
                    <span>
                      {' '}
                      <span style={{ color: 'red' }}>*</span>车架号：
                    </span>
                    <Form.Item
                      name="chejia"
                      style={{
                        width: 200,
                        display: 'inline-block',
                      }}
                    >
                      <Input style={{ width: '200px' }} />
                    </Form.Item>
                  </td>
                  <td>
                    <span> 收车人：</span>
                    <Form.Item
                      name="shouPerson"
                      style={{
                        width: 200,
                        display: 'inline-block',
                      }}
                    >
                      <Input style={{ width: '200px' }} />
                    </Form.Item>
                  </td>

                  <td>
                    <span>
                      {' '}
                      <span style={{ color: 'red' }}>*</span>收车时间：
                    </span>
                    <Form.Item
                      name="shouchetime"
                      style={{
                        width: 300,
                        display: 'inline-block',
                      }}
                    >
                      <DatePicker style={{ width: '180px' }} />
                    </Form.Item>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span>来源渠道：</span>
                    <Form.Item
                      name="handle"
                      style={{
                        width: 200,
                        display: 'inline-block',
                      }}
                    >
                      <Input style={{ width: '200px' }} />
                    </Form.Item>
                  </td>
                  <td>
                    <span>原车主姓名:</span>
                    <Form.Item
                      name="yuancheName"
                      style={{
                        width: 200,
                        display: 'inline-block',
                      }}
                    >
                      <Search
                        placeholder="请输入"
                        onSearch={onSearch}
                        style={{ marginTop: '1px', width: '200px' }}
                      />
                    </Form.Item>
                  </td>
                  <td></td>
                  <td>
                    <span>供应商名称:</span>
                    <Form.Item
                      name="gysname"
                      style={{
                        width: 200,
                        display: 'inline-block',
                      }}
                    >
                      <Search
                        placeholder="请输入"
                        onSearch={onSearch}
                        style={{ marginTop: '1px', width: '200px' }}
                      />
                    </Form.Item>
                  </td>
                </tr>
                <tr>
                  <td></td>
                  <td>
                    <span>
                      <span style={{ color: 'red' }}>*</span>库管人员:
                    </span>
                    <Form.Item
                      name="putmanagement"
                      style={{
                        width: 200,
                        display: 'inline-block',
                      }}
                    >
                      <Search
                        placeholder="请输入"
                        onSearch={onSearch}
                        style={{ marginTop: '1px', width: '200px' }}
                      />
                    </Form.Item>
                  </td>
                  <td></td>
                  <td></td>
                </tr>
                <tr style={{ height: '100%' }}>
                  <td colspan="4" style={{ height: '100%' }}>
                    <span style={{ lineHeight: '200px' }}>备注:</span>
                    <Form.Item
                      name="remarks"
                      style={{
                        // width: ' ',
                        display: 'inline-block',
                        lineHeight: '200px',
                      }}
                    >
                      <TextArea
                        style={{
                          height: '200px',
                          width: 'calc(100vw - 485px)',
                        }}
                      />
                    </Form.Item>
                  </td>
                </tr>
              </tbody>
            </table>
            <Form.Item
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            ></Form.Item>
          </Form>
        </div>
        {/* 入库明细 */}
        <div className="rkmxbox">
          <ProForm>
            {/* <ProFormList
                            name='labels'
                            label="入库明细"
                            style={{ fontSize: "1.5rem" }}
                            initialValue={[
                                {
                                    name: '1111',
                                },
                            ]}
                            alwaysShowItemLabel
                        >
                            <ProForm.Group key="group">
                                <ProFormText width="xs" name="function" label="产品名称" />
                                <ProFormText width="xs" name="gfunction" label="产品编号" />
                                <ProFormText width="xs" name="gfunction" label="规格型号" />
                                <ProFormText width="xs" name="gfunction" label="单位" />
                                <ProFormText width="xs" name="gfunction" label="单价" />
                                <ProFormText width="xs" name="gfunction" label="申请入库数量" />
                                <ProFormText width="xs" name="gfunction" label="总金额" />
                                <ProFormText width="xs" name="gfunction" label="批号" />
                                <ProFormText width="xs" name="gfunction" label="生产日期" />
                                <ProFormText width="xs" name="gfunction" label="有效日期" />
                                <ProFormText width="xs" name="gfunction" label="到货日期" />
                                <ProFormText width="xs" name="gfunction" label="包装方式" />
                                <ProFormText width="xs" name="gfunction" label="备注" />
                            </ProForm.Group>
                            <ProForm.Group key="group">
                                <ProFormText width="xs" name="function" />
                                <ProFormText width="xs" name="gfunction" />
                                <ProFormText width="xs" name="gfunction" />
                                <ProFormText width="xs" name="gfunction" />
                                <ProFormText width="xs" name="gfunction" />
                                <ProFormText width="xs" name="gfunction" />
                                <ProFormText width="xs" name="gfunction" />
                                <ProFormText width="xs" name="gfunction" />
                                <ProFormText width="xs" name="gfunction" />
                                <ProFormText width="xs" name="gfunction" />
                                <ProFormText width="xs" name="gfunction" />
                                <ProFormText width="xs" name="gfunction" />
                                <ProFormText width="xs" name="gfunction" />
                            </ProForm.Group>
                        </ProFormList> */}
            <ProFormList
              name="labels"
              label="入库明细"
              style={{ fontSize: '1.5rem' }}
              initialValue={[
                {
                  name: '1111',
                },
              ]}
              // copyIconProps={{ Icon: SmileOutlined, tooltipText: '复制此行到末尾' }}
              copyIconProps={false}
              deleteIconProps={{
                Icon: CloseCircleOutlined,
                tooltipText: '不需要这行了',
              }}
              alwaysShowItemLabel
            >
              <ProForm.Group>
                <ProFormText width="xs" name="function" label="产品名称" />
                <ProFormText width="xs" name="gfunction" label="产品编号" />
                <ProFormText width="xs" name="gfunction" label="规格型号" />
                <ProFormText width="xs" name="gfunction" label="单位" />
                <ProFormText width="xs" name="gfunction" label="单价" />
                <ProFormText width="xs" name="gfunction" label="申请入库数量" />
                <ProFormText width="xs" name="gfunction" label="总金额" />
                <ProFormText width="xs" name="gfunction" label="批号" />
                <ProFormText width="xs" name="gfunction" label="生产日期" />
                <ProFormText width="xs" name="gfunction" label="有效日期" />
                <ProFormText width="xs" name="gfunction" label="到货日期" />
                <ProFormText width="xs" name="gfunction" label="包装方式" />
                <ProFormText width="xs" name="gfunction" label="备注" />
              </ProForm.Group>
            </ProFormList>
          </ProForm>
        </div>
        <div className="fujian">
          <table border={1}>
            <tr>
              <td colspan={14}>
                附件 &nbsp; <Button>批量上传</Button>{' '}
              </td>
            </tr>
            <tr>
              <td colSpan={6}> 文件名称</td>
              <td>文件大小</td>
              <td>上传人</td>
              <td colSpan={2}>上传时间</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr style={{ backgroundColor: 'white' }}>
              <td colspan={14} style={{ height: '4rem' }}></td>
            </tr>
          </table>
        </div>
      </div>
    </>
  );
}
